<template>
	<view class="wx-wrap">
		<u-sticky bg-color="#0a0809">
			<u-tabs :list="list" @click="onTabClick" lineColor="rgba(255, 255, 255, .7)"
				:activeStyle="{fontWeight: 'blod', color: '#fff'}" :inactiveStyle="{color: 'rgba(255, 255, 255, .7)'}"
				keyName="title"></u-tabs>
		</u-sticky>
		<view class="content">
			<template v-if="peopleList.length">
				<view class="content-item" v-for="(item,index) in peopleList" :key="index" @click="onItemClick(item)">
					<image :src="item.imgs[0]" mode="" lazy-load></image>
					<text>{{item.name}}</text>
				</view>
			</template>
			<view v-else class="no-data">
				<u-empty mode="history" text="敬请期待" iconSize="30">
				</u-empty>
			</view>
		</view>
		<u-loading-page :loading="showLoading" bgColor="rgba(0, 0, 0, 1)" fontSize="12"></u-loading-page>
	</view>
</template>

<script>
	import {
		getCategory,
		getList
	} from '@/api/api.js'
	export default {
		data() {
			return {
				peopleList: [],
				list: [],
				cat_id: '',
				showLoading: false
			}
		},
		mounted() {
			this.getPeopleCategory()

		},
		methods: {
			onTabClick(item) {
				this.cat_id = item.id
				this.getPeopleList()
			},
			async getPeopleCategory() {
				this.showLoading = true
				const res = await getCategory({
					dbName: 'people-classify'
				})
				this.list = res
				this.cat_id = res[0].id
				this.getPeopleList()
			},
			async getPeopleList() {
				const params = {
					pageNo: this.pageNo,
					cat_id: this.cat_id,
					dbName: 'people-list'
				}
				this.showLoading = true
				const res = await getList(params)
				this.peopleList = res
				this.showLoading = false
			},
			onItemClick(item) {
				uni.navigateTo({
					url: `/pages/people/detail?desc=${item.desc}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wx-wrap {
		min-height: 100vh;
		background: #0a0809;

		.content {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;

			&-item {
				width: 23%;
				height: 250rpx;
				background: rgba(255, 255, 255, .2);
				border-radius: 20rpx;
				margin-right: 2%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				font-size: 28rpx;
				padding-bottom: 10rpx;
				color: #fff;

				image {
					width: 98%;
					height: 200rpx;
					border-top-right-radius: 20rpx;
					border-top-left-radius: 20rpx;
				}
			}

			.no-data {
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>